<template>
    <van-popup v-model:show="isShow" position="right" @click-overlay="onClickOverlay">
        <div class="type-selector">
            <div class="types" v-for="item in TypeNames" :key="item.id">

                <div class="type-name">{{ item.name }}</div>
                <div class="type-list">


                    <template v-for="(typeItem, index) in typeList" :key="typeItem.value">
                        <div class="type-item" v-if="typeItem.type === item.id" @click="onClick(typeItem.index)"
                            :data-index="index">
                            <van-image :src="typeItem.icon"></van-image>
                            <span>{{ typeItem.name }}</span>
                            <van-image :src="selected" class="selected" v-if="index === currentIndex"></van-image>
                        </div>
                    </template>

                </div>
            </div>

        </div>
    </van-popup>
</template>
<script setup>

import car from '/assets/type/car.png'
import huoche from '/assets/type/huoche.png'
import moto from '/assets/type/moto.png'
import bus from '/assets/type/bus.png'
import keyun from '/assets/type/keyun.png'
import huoyun from '/assets/type/huoyun.png'
import weixian from '/assets/type/weixian.png'
import jiaolian from '/assets/type/jiaolian.png'
import chuzu from '/assets/type/chuzu.png';
import selected from '/assets/type/selected.png';




const TypeNames = [
    { name: '驾考类型', id: 0 },
    { name: '资格证类型', id: 1 },
]

const typeList = [
    { name: '小车', icon: car, type: 0, value: 'car', index: 0 },
    { name: '货车', icon: huoche, type: 0, value: 'huoche', index: 1 },
    { name: '摩托车', icon: moto, type: 0, value: 'moto', index: 2 },
    { name: '客车', icon: bus, type: 0, value: 'bus', index: 3 },
    { name: '客运', icon: keyun, type: 1, value: 'keyun', index: 4 },
    { name: '货运', icon: huoyun, type: 1, value: 'huoyun', index: 5 },
    { name: '危险品', icon: weixian, type: 1, value: 'weixian', index: 6 },
    { name: '教练', icon: jiaolian, type: 1, value: 'jiaolian', index: 7 },
    { name: '出租车', icon: chuzu, type: 1, value: 'chuzu', index: 8 },
]

import { computed, ref } from 'vue'
import { useStore } from '@/pinia/index.js'
const store = useStore()


const currentIndex = computed(() => store.car_type_index)  //当前考试类型索引值



const isShow = computed(() => store.type_menu_show)

// 关闭弹窗事件
const onClickOverlay = () => {
    store.set_type_menu_show(false)
};


const onClick = (index) => {

    store.set_car_type_index(index) //设置考试类型
    store.set_type_menu_show(false)


}

</script>
<style lang="scss" scoped>
.type-selector {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .types {
        flex: 1;
        overflow-y: auto;
        height: 50vh;

        .type-name {
            font-size: 15px;
            color: #333;
            padding: 5px 10px;
        }

        .type-list {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            align-items: center;
            border-top: solid 1px #f0f0f0;
            // padding-top: 10px;
            // row-gap: 5px;


            .type-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                position: relative;

                .van-image {
                    transform: scale(0.5)
                }


                .selected {
                    position: absolute;
                    top: 0;
                    right: 0
                }


            }
        }
    }

}
</style>